<template>
	<view class="page">
		<view class="content">
			<view class="list_x list_1">
				<view class="img">
					<image :src="caddie_info.head_img" mode="aspectFill"></image>
				</view>
				<view class="username">
					<view>{{caddie_info.user_nickname}}</view>
					<view>(编号:{{caddie_info.invite_code}}）</view>
				</view>
			</view>
			<view class="list_x list_2">
				<view>球场名称</view>
				<view>{{caddie_info.ball_title}}</view>
			</view>
			<view class="list_x list_3">
				<u-field v-model="appointmentTime" type="text" :clearable="false" :disabled="true" :password-icon="false" input-align="right" label="预约时间" placeholder="设置预约时间" placeholder-style="color:#009B77" @tap="changeDate"></u-field>
				<view class="bottom">
					<view class="date" @tap="getTimeaid(k, v.aid)" :class="timeIndex == k ? 'active': ''" v-for="(v, k) in sub_time" :key="k">{{v.start_end_time}}</view>
					<!-- <view class="date">1V2  ￥300/场次</view>
					<view class="date">1V1  ￥200/场次</view>
					<view class="date">1V2  ￥300/场次</view> -->
				</view>
				<!-- <u-icon class="icon" name="arrow-right"></u-icon> -->
			</view>
			<view class="list_x list_4">
				<u-field v-model="price1" type="text" :clearable="false" :disabled="true" :password-icon="false" input-align="right" label="价格" placeholder="设置价格" placeholder-style="color:#009B77" @tap="getPrice"></u-field>
				<view class="bottom">
					<view class="date" :class="priceIndex == 0 ? 'active': ''" @tap="changePrice(0)">1V1价格  ￥{{caddie_info.price_a}}/场次</view>
					<view class="date" :class="priceIndex == 1 ? 'active': ''" @tap="changePrice(1)">1V2价格  ￥{{caddie_info.price_b}}/场次</view>
					<view class="date" :class="priceIndex == 2 ? 'active': ''" @tap="changePrice(2)">1V3/4价格  ￥{{caddie_info.price_c}}/场次</view>
					<view class="date" :class="priceIndex == 3 ? 'active': ''" @tap="changePrice(3)">高球助理  ￥{{caddie_info.price_d}}/场次</view>
				</view>
			</view>
		</view>
		<view class="tx_btn">
			<button open-type="share" :plain="true">立即分享</button>
		</view>
	</view>
</template>

<script>
	import wPicker from "@/components/w-picker/w-picker.vue";
	export default {
		data() {
			return {
				appointmentTime: '',
				price1: '',
				price: '',
				coupon: '',
				mobile: '',
				license: '',
				show: false,
				selectDate: '',
				visible: false,
				caddie_info: '',
				sub_time: [],
				timeIndex: 0,
				timeId: '',
				priceIndex: 0
			}
		},
		components: {
			wPicker
		},
		onShareAppMessage(res) {
		   if (res.from === 'button') {// 来自页面内分享按钮
		     console.log(res.target)
		   }
		   return {
		     title: 'Talent',
		     path: '/pages/index/appointmentNow?id=' + global.userInfo.id + '&invite_code=' + this.caddie_info.invite_code + '&shareId=' + 2
		   }
		},
		onLoad() {
			
		},
		onShow() {
			uni.showLoading({
				title: '加载中'
			})
			this.shareOrderInfo()
			uni.hideShareMenu()
		},
		methods: {
			shareOrderInfo() {
				this.$api.post(global.apiUrls.shareOrder, {
					
				}).then(res => {
					console.log(res)
					uni.hideLoading()
					if(res.data.code == 1) {
						this.caddie_info = res.data.data.caddie_info
						this.sub_time = res.data.data.sub_time
						this.price = this.caddie_info.price_a
						if (this.sub_time.length != 0) {
							this.timeId = this.sub_time[0].aid
						}
						
					} else {
						this.$message.info(res.data.msg)
					}
				})
			},
			// 选择时间id
			getTimeaid(k, aid) {
				this.timeIndex = k
				this.timeId = aid
			},
			// 选择预约时间
			changeDate() {
				uni.navigateTo({
					url: '/pages/user/user/appointmenTime'
				})
			},
			// 选择价格
			changePrice(id) {
				if (id == 0) {
					this.priceIndex = 0
					this.price = this.caddie_info.price_a
				}
				if (id == 1) {
					this.priceIndex = 1
					this.price = this.caddie_info.price_b
				}
				if (id == 2) {
					this.priceIndex = 2
					this.price = this.caddie_info.price_c
				}
				if (id == 3) {
					this.priceIndex = 3
					this.price = this.caddie_info.price_d
				}
			},
			// 设置价格
			getPrice() {
				uni.navigateTo({
					url: '/pages/user/user/myPrice'
				})
			},
			share() {
				
			}
		},
		
	}
</script>

<style lang="scss" scoped>
  .page{
    min-height: 100vh;
    background-color: #f2f2f1;
	color: #333333;
	padding: 24rpx 24rpx 120rpx;
	.content {
		display: block;
		border-radius: 16rpx;
		padding: 0 24rpx;
		background: #FFFFFF;
		.list_x {
			padding: 32rpx 0;
			border-bottom: 1rpx solid #EEEEEE;
			
			// padding: 0 ;
		}
		.list_1 {
			display: flex;
			.img {
				width: 120rpx;
				height: 120rpx;
				border-radius: 8rpx;
				margin-right: 24rpx;
				image {
					width: 100%;
					height: 100%;
					border-radius: 8rpx;
				}
			}
			.username {
				view:first-child {
					font-size: 32rpx;
					font-weight: bold;
					padding-top: 14rpx;
					margin-bottom: 16rpx;
				}
				view:last-child {
					font-size: 24rpx;
					color: #6B6F73;
				}
			}
		}
		.list_2 {
			display: flex;
			font-size: 28rpx;
			view:first-child {
				width: 50%;
			}
			view:last-child {
				width: 50%;
				text-align: right;
				overflow: hidden; // 超出的文本隐藏
				text-overflow: ellipsis; // 溢出用省略号显示
				white-space: nowrap; // 溢出不换行
			}
		}
		.list_3 {
			padding-bottom: 8rpx;
			.bottom {
				overflow: hidden;
				margin-top: 24rpx;
				.date {
					float: left;
					width: 318rpx;
					height: 64rpx;
					line-height: 64rpx;
					text-align: center;
					background: #FFFFFF;
					border: 1rpx solid #D9D9D9;
					opacity: 1;
					border-radius: 8rpx;
					color: #6B6F73;
					margin-right: 18rpx;
					margin-bottom: 24rpx;
					font-size: 24rpx;
				}
				.date:nth-child(2n+2) {
					margin-right: 0;
				}
			}
		}
		.list_4 {
			padding-bottom: 12rpx;
			// .price {
			// 	margin-bottom: 24rpx;
			// }
			.bottom {
				overflow: hidden;
				margin-top: 24rpx;
				.date {
					float: left;
					width: 318rpx;
					height: 64rpx;
					line-height: 64rpx;
					text-align: center;
					background: #FFFFFF;
					border: 1rpx solid #D9D9D9;
					opacity: 1;
					border-radius: 8rpx;
					color: #6B6F73;
					margin-right: 18rpx;
					margin-bottom: 24rpx;
					font-size: 24rpx;
				}
				.date:nth-child(2n+2) {
					margin-right: 0;
				}
			}
		}
	}
	.active {
		border: 1rpx solid #006747 !important;
		color: #006747 !important;
	}
	
	/deep/.u-field {
		flex: 9;
		padding: 0 !important;
		font-size: 28upx;
		color: rgba(51, 51, 51, 1);
	}
	
	/deep/.u-flex {
		width: 100%;
		margin: 0;
	}
	
	/deep/.u-field__input-wrap {
		// height: 128upx;
		// line-height: 128upx;
		font-size: 28upx;
		color: rgba(51, 51, 51, 1);
	}
	
	/deep/.u-field-inner {
		// width: 100% ;
	}
	.line {
		height: 20rpx;
		width: 100%;
		background: #f2f2f1;
	}
	.tx_btn {
		font-size: 32upx;
		color: white;
		line-height: 88upx;
		text-align: center;
		position: fixed;
		bottom: 40upx;
		left: 32upx;
		width: 686rpx;
		height: 88rpx;
		background: #006747;
		opacity: 1;
		border-radius: 8rpx;
		button {
			width: 686rpx;
			height: 88rpx;
			outline: none;
			background: #006747;
			color: #FFFFFF;
		}
	}
  }
  
</style>